import React, { Component } from 'react'
import {Row,Col,Tooltip } from 'antd';
import './index.less'
import { Card } from 'antd'
import { Link } from 'react-router-dom'

export default class PersonnelItem extends Component {

  render() {
    console.log(this.props.data.achievements)
    let achievements;
    if(this.props.data.achievements.length!==0){
      achievements = 
          this.props.data.achievements.map((item,index) => 
          <Tooltip title={item.name}>
           <img src={item.url}/>
          </Tooltip>
          )
    }else{
      achievements = null
    }
    let iconAddr;
    if(this.props.data.iconAddr){
      iconAddr = this.props.data.iconAddr
    }else{
      iconAddr = "/assets/home/avatar.jpg"
    }
    return (
      
      <Row className="list">
              <Col span={8}>
              <Link to={{pathname:'/home/personalInfor',state: this.props.data}}>
                  <Card className="personal" bodyStyle={{ padding: 0 }}>
                    <div className="personal-image">
                      {/* <img alt="avatar" src={"/api" + this.props.data.iconAddr} /> */}
                      <img alt="avatar" src={iconAddr} />
                    </div>
                    <div className="personal-card">
                      <h3>{this.props.data.username}</h3>
                    </div>
                  </Card>
                </Link>
              </Col>
              <Col span={1}></Col>
              <Col span={15}>
                <div className="detail">姓名：{this.props.data.name}</div>
                <div className="detail" className={this.props.data.sex =="0" ? "detail" : "react-show"}>性别：男</div>
                <div className="detail" className={this.props.data.sex =="1" ? "detail" : "react-show"}>性别：女</div>
                <div className="detail">部门：{this.props.data.departmentName}</div>
                <div className="detail">星座：{this.props.data.sign}</div>
                <div className="detail" className={this.props.data.autograph!=="" ? "detail" : "react-show"}>个性签名：{this.props.data.autograph}</div>
                <div className="detail">个人成就：{achievements}</div>
                
              </Col>
      </Row>
          
      
    )
  }
}
